<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 全局组件:子组件可以任意使用 */
			Vue.component('Vquanju',{
				template:`<div>我是全局组件</div>`
			});
		
			/* 以下为局部组件 */
			var Vheader={
				template:`
					<div>
						我是头部组件
						<Vquanju />
					</div>
				`	
			};
			
			var Vaside={
				template:`
					<div>
						我是侧边栏组件
					</div>
				`	
			};
			
			var Vcontent={
				template:`
					<div>
						我是内容组件
					</div>
				`	
			};
	
			//1.声明局部组件(声子)
			var App={
				//组件必有一个模板
				template:`
					<div>
						<Vheader />
						<div>
							<Vaside />
							<Vcontent />
						</div>
						<Vquanju />
					</div>
				`,
				components:{
					Vheader,
					Vaside,
					Vcontent
				}
			};
			new Vue({
				el:'#app',
				/* 为什么data这里要求是一个函数？
				   相当于javaScript中的深拷贝与浅拷贝了，如果单单返回对象，那么组件复用的时候使用的是同一内存地址，一个改变其它的也跟着改变。
				   如果是一个函数，那么组件复用的时候，其内存地址不一样，所以会各玩各的，互不影响。
				*/
				data(){
					return{
						
					}
				},
				//2.挂载局部组件(挂子)
				components:{
					App
				},
				//3.用子
				template:' <App></App>'
			});
		</script>
	</body>
</html>
